<template>
    <div class="detail-pagewrap">
        <!-- header -->
        <div class="detail-header">
            <van-nav-bar title="订单详情" left-text="返回" right-text="" left-arrow @click-left="onClickLeft" />
        </div>
        <!-- 主体内容 -->
        <div class="detail-content">
            <div class="detail-content-title">
                <div class="content-title">
                    <span>{{toskdetail.title}}</span>
                </div>
                <div class="content-label">
                    <div class="TaskLabel">
                        <p v-for="item in toskdetail.select">{{item}}</p>
                    </div>
                    <p>浏览量：99+</p>
                </div>
                <div class="content-price">
                    <p>
                        <span class="UnitPrice">{{toskdetail.price}}</span>
                        <span>￥</span>
                    </p>
                </div>
                <div class="content-time-place">
                    <p><span>工作时间:{{toskdetail.currentDate+toskdetail.hours}}</span></p>
                    <p><span>工作地点:{{toskdetail.place}}</span></p>
                </div>
            </div>
            <div class="detali-content-notice">

                <svg t="1665119632554" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1099" width="20" height="20">
                    <path
                        d="M895.59 157.395c-125.446-5.447-245.541-47.869-356.98-126.129l-21.122-14.814-21.067 14.814c-111.371 78.247-231.478 120.682-356.133 126.102l-39.376 0 0 331.722c0 242.989 167.622 451.066 407.648 505.993l10.473 1.679 7.523-1.679c239.971-54.927 407.566-263.004 407.566-505.993l0-331.722-38.53 0.028zM746.086 381.679l-267.728 277.777c-6.718 6.198-17.285 5.789-23.498-0.928l-166.284-176.538c-6.198-6.718-5.789-17.285 0.928-23.498l4.246-3.919c6.718-6.198 17.285-5.789 23.498 0.928l150.05 159.307 250.948-260.492c6.417-6.526 16.998-6.608 23.511-0.191l4.11 4.055c6.54 6.403 6.622 16.985 0.219 23.498z"
                        p-id="1100" data-spm-anchor-id="a313x.7781069.0.i0" class="selected" fill="#d3a82c"></path>
                </svg>

                <p class="blod">求职保障</p>
                <p class="blod2">已参加求职者保障计划，安心赚钱</p>
            </div>
            <!-- 订单详情 -->
            <div class="detail-content-Secondarytitle">
                <div class="Secondarytitle">
                    <p>订单详情</p>
                </div>
                <div class="detail-richText" v-html="toskdetail.content"></div>
                <div class="Riskstatement">
                    <p>注意：请警惕非本平台提供的短信，QQ号，电话等兼职信息。报名后在线沟通，或获取雇主联系方式即可！若岗位涉及赌博、刷单、彩票等非法内容，请直接联系客服投诉，我们会严肃处理，感谢您的支持。</p>
                </div>
            </div>
            <!-- 客户信息 -->
            <div class="detail-content-Secondarytitle">
                <div class="Secondarytitle">
                    <p>客户信息</p>
                </div>
                <div class="Customerinfo">
                    <div class="Customerinfo-img">
                        <svg t="1665140709025" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="7088" width="30" height="30">
                            <path
                                d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z"
                                fill="#92BE33" p-id="7089"></path>
                            <path
                                d="M1024 512c0-30.36-2.832-60.064-7.96-89.008L580.464 202.496s-36.104-0.84-48.168 0c-12.048 0.84-41.64 1.52-61.208 12.144-19.56 10.632-49.664 37.96-49.664 37.96s-10.032-7.088-25.088-3.544c-15.048 3.544-19.336 22.288-19.336 22.288s-10.768 86.008-9.264 157.36c0 0-37.424-32.688-25.88 32.592 4.152 23.48 26.688 9.232 34.208 6.704 15.048 73.384 106.72 129.72 98.032 153.008-5.496 14.72-6.52 16.192-22.072 21.752-10.544 3.784-28.096 5.568-35.616 17.712-13.96 22.528-7.36 23.784-7.36 23.784s-92.648 38.456-100.512 49.592c-7.856 11.136-7.856 96.872-7.856 96.872l183.448 192.488c9.232 0.496 18.52 0.792 27.872 0.792 281.6 0 512-230.4 512-512z"
                                fill="#61872E" p-id="7090"></path>
                            <path
                                d="M510.536 716.584l5.616-9.944 52.2-19.344 24.688-21 42.656 14.368 55.008 25.424 23.576 19.344 2.808 23.208 6.168 80.696-216.088 5.528zM503.848 717.696l-5.52-9.952-51.4-19.344-24.32-21-42 14.368-54.16 25.424-23.216 19.344-2.76 23.216-6.08 80.688 212.776 5.528z"
                                fill="#0D946D" p-id="7091"></path>
                            <path
                                d="M562.432 604.4l9.4 41.448 6.624 22.104-35.368 16.576-18.784 5.528-7.736 17.136-8.848 6.08-4.416-25.424-39.792-10.496-10.504-11.616 6.08-19.888 9.952-40.904 28.176 12.72 19.352 2.76z"
                                fill="#F3D8C2" p-id="7092"></path>
                            <path
                                d="M527.616 687.296l-6.08 18.792 15.472-2.208 31.504-7.184 19.344-11.056 16.584-17.688 11.056 1.104 3.312-9.392-13.816-8.84-11.608-5.528-6.08-10.504-14.368-2.208-4.976 3.864 7.736 13.816 4.424 14.376-7.736 10.504zM458.536 630.928l-14.928 0.544-14.92 8.296-19.344 7.184-6.632 16.576v12.712l24.32-7.184 19.896 19.344 39.792 16.032 14.368 2.208-1.104-18.792-19.896-3.864-16.576-6.632-14.928-8.296 2.76-18.232z"
                                fill="#3AB394" p-id="7093"></path>
                            <path
                                d="M585.136 331.248c-0.848 2.368-1.904 4.64-3.408 6.784-0.608 0.872-1.632 1.44-2.712 1.784v20.856s-89.944-23.72-114.016-66.352c-4.216 1.272-8.392 2.744-12.72 3.24-13.792 8.44-64.912 41.624-71.12 73.624-7.184 37.024 268.376 104.464 268.376 104.464s14.112-96.144-64.4-144.4"
                                fill="#F3D8C2" p-id="7094"></path>
                            <path
                                d="M649.536 475.632c-19.096 82.544-86.816 143.792-135.648 143.792-12.952 0-30.08-6.968-47.92-19.376-44.28-30.808-92.928-95.136-92.928-169.512 0-22.248 0.032-34.272 5.296-54.088"
                                fill="#F3D8C2" p-id="7095"></path>
                            <path
                                d="M513.888 623.848c-13.832 0-31.744-7.168-50.448-20.168-47.192-32.84-94.816-99.104-94.816-173.144 0-22.392 0-34.72 5.448-55.232l8.544 2.272c-5.152 19.4-5.152 31.32-5.152 52.96 0 70.848 45.72 134.36 91.024 165.88 16.984 11.816 33.528 18.592 45.392 18.592 46.672 0 112.752-60.032 131.336-140.368l8.624 1.992c-20.072 86.76-89.864 147.216-139.952 147.216"
                                fill="#474341" p-id="7096"></path>
                            <path
                                d="M655.488 268.344c-13.312-12.488-32.704-6.984-48.88-0.872 2.56-5.48 12.08-22.16 14.648-27.632-10.752-9.408-32.912-0.088-45.04 6.472 3.376-7.728 9.944-23.72 17.272-25.232-14.264-30.176-48.48-28.312-77.744-24.896-36.792 4.296-72.248 22.384-99.872 50.936-10.04-8.848-25.288-4.416-33.984 6.08-8.696 10.504-12.28 25.328-14.824 39.656-5.944 33.528-5.064 90.952-2.848 125.152l12.552-0.104c-0.176-54.808 30.52-113.544 86.128-129.48 4.216-1.208 6.52 3.528 4.912 6.504 4.56 20.544 35.864 33.52 52.76 41.808 17.088 8.384 53.344 27.608 60.272-0.456 0.872-3.528 4.928-3.904 7.392-1.952 8.656 6.864 12.392 16.136 19.56 24.368 6.336 7.28 13.944 13.208 20.088 20.736 9.08 11.144 15.32 22.616 17.992 36.272l20.24-0.168c24.104-69.432-0.864-138.032-10.624-147.192"
                                fill="#B77917" p-id="7097"></path>
                            <path
                                d="M511.672 625.696c-14.2 0-32.488-7.28-51.496-20.504-47.592-33.104-95.608-99.96-95.608-174.656 0-21.8 0-34.96 5.504-55.704a6.256 6.256 0 0 1 7.664-4.448 6.266 6.266 0 0 1 4.448 7.664c-5.096 19.168-5.096 31-5.096 52.48 0 70.176 45.32 133.12 90.24 164.368 16.68 11.6 32.84 18.256 44.336 18.256 45.984 0 111.144-59.424 129.544-138.944a6.28 6.28 0 0 1 7.52-4.696 6.276 6.276 0 0 1 4.696 7.52c-20.264 87.616-90.968 148.664-141.752 148.664M725.088 842.16H293.736l-6.256-6.608s3.12-57.296 5.2-96.872c2.264-42.928 117.344-73.8 130.464-77.168 3.32-0.888 6.768 1.144 7.632 4.504a6.266 6.266 0 0 1-4.504 7.632c-46.096 11.88-119.736 40.224-121.072 65.696-1.656 31.456-3.968 74.088-4.848 90.288h418.12c-0.88-16.2-3.192-58.832-4.848-90.288-1.344-25.568-68.52-54.048-110.544-65.992a6.266 6.266 0 0 1-4.312-7.744 6.258 6.258 0 0 1 7.744-4.312c12.008 3.416 117.376 34.576 119.624 77.392 2.08 39.584 5.208 96.872 5.208 96.872l-6.256 6.6z"
                                fill="#474341" p-id="7098"></path>
                            <path
                                d="M529.064 693.84a6.264 6.264 0 0 1-0.728-12.488c17.816-2.12 33.512-8.6 43.824-17.976-8.616-17.664-13.248-35.864-13.776-54.192a6.272 6.272 0 0 1 6.08-6.448c3.4 0.048 6.344 2.632 6.44 6.088 0.512 17.832 5.376 35.616 14.448 52.864l-0.944 7.152c-12.104 13.168-32 22.256-54.6 24.944a4.66 4.66 0 0 1-0.744 0.056M502.696 695.488a5.84 5.84 0 0 1-0.752-0.048c-23.696-2.832-43.112-11.856-56.16-26.104l-0.888-7.216c9.064-16.728 14.112-33.936 14.992-51.152 0.168-3.456 3.152-6.272 6.576-5.936a6.254 6.254 0 0 1 5.936 6.576c-0.896 17.672-5.712 35.272-14.328 52.36 10.992 10.36 26.232 16.752 45.36 19.04a6.262 6.262 0 0 1-0.736 12.48"
                                fill="#474341" p-id="7099"></path>
                            <path
                                d="M498.328 689.224v140.8c0 8.064 12.528 8.08 12.528 0v-140.8c0.008-8.064-12.528-8.08-12.528 0"
                                fill="#474341" p-id="7100"></path>
                            <path
                                d="M504.592 737.336c-0.944 0-1.904-0.216-2.808-0.664a6.28 6.28 0 0 1-2.792-8.416L520 686.408a6.26 6.26 0 0 1 8.416-2.792 6.26 6.26 0 0 1 2.784 8.408l-21.008 41.848a6.252 6.252 0 0 1-5.6 3.464M423.936 676.76c20.368 22.344 46.424 30.792 75.368 36.288 7.88 1.496 11.256-10.576 3.336-12.088-26.92-5.104-50.784-12.168-69.832-33.064-5.448-5.976-14.296 2.912-8.872 8.864"
                                fill="#474341" p-id="7101"></path>
                            <path
                                d="M519.432 712.76c32.624-3.016 71.032-10.168 89.032-41.248 4.048-6.992-6.776-13.312-10.824-6.328-15.624 26.976-50.232 32.456-78.216 35.04-7.96 0.736-8.032 13.28 0.008 12.536M406.656 669.752c0.384-7.8 3.608-14.776 10.688-18.688 4.536-2.512 9.824-1.032 13.984-3.488 3.824-2.264 6.328-6.16 10.552-8.192 5.32-2.568 10.656-3.016 16.416-2.592 8.048 0.6 8.008-11.936 0-12.536-7.88-0.584-15.664 0.64-22.744 4.304-6.096 3.152-9.568 6.632-16.28 8.36-15.416 3.976-24.384 17.432-25.144 32.832-0.408 8.056 12.128 8.04 12.528 0"
                                fill="#474341" p-id="7102"></path>
                            <path
                                d="M574.04 640.864c6.976-2.416 13.072 0.12 15.144 7.208 0.856 2.936 3.216 4.24 6.04 4.6 5.256 0.672 12.704 1.496 15.52 6.752 1.816 3.4 1.872 9.408 2.264 13.104 0.848 7.936 13.392 8.024 12.528 0-0.824-7.752-1.104-17.864-6.728-23.896-5.712-6.136-15.776-7.496-23.592-8.496 2.016 1.536 4.032 3.064 6.04 4.6-3.968-13.568-17.088-20.616-30.56-15.968-7.56 2.632-4.304 14.744 3.344 12.096M359.784 425.744a6.264 6.264 0 0 1-6.248-5.856c-1.952-29.944-3.528-90.32 2.984-126.664 2.728-15.224 6.592-30.92 16.336-42.568 6.208-7.432 15.192-12.288 24.048-12.984 5.16-0.408 10.016 0.568 14.304 2.816 28.32-27.44 63.944-44.816 100.856-49.088 23.616-2.736 67.56-7.824 84.848 28.408a6.264 6.264 0 0 1-4.4 8.832c-1.064 0.28-2.768 1.768-5.448 6.296 12.568-4.464 26.936-6.544 36.32 1.584 2.12 1.84 2.76 4.872 1.56 7.416-1.328 2.808-4.448 8.488-7.568 14.16l-0.008 0.008c12.776-3.208 28.64-4.168 40.72 7.064 12.856 11.944 37.048 83.392 12.336 153.864a6.272 6.272 0 0 1-11.832-4.152c23.304-66.44-0.64-132.728-9.04-140.536-10.536-9.792-26.824-5.584-42.872 0.416a6.28 6.28 0 0 1-6.808-1.624 6.254 6.254 0 0 1-1.048-6.92c1.328-2.808 4.44-8.488 7.568-14.168 1.56-2.824 3.12-5.656 4.432-8.096-7.36-1.624-19.896 1.712-34.056 9.296a6.286 6.286 0 0 1-7.224-0.92 6.3 6.3 0 0 1-1.48-7.136l0.592-1.336c4.072-9.28 8.48-18.48 14.152-23.608-13.72-20.856-41.664-19.624-69.32-16.408-35.704 4.136-70.168 21.576-97.056 49.104a6.266 6.266 0 0 1-8.6 0.352c-2.728-2.392-6.072-3.448-9.96-3.136-5.56 0.432-11.32 3.624-15.416 8.52-7.864 9.408-11.192 23.224-13.616 36.744-5.48 30.592-5.304 85.528-2.816 123.624a6.256 6.256 0 0 1-5.84 6.656 1.656 1.656 0 0 1-0.4 0.04"
                                fill="#474341" p-id="7103"></path>
                            <path
                                d="M648.192 430.464a6.274 6.274 0 0 1-6.144-5.08c-6.752-34.824-32.2-62.352-56.464-85.072 0.136 3.056 0.224 6.304 0.296 9.672 0.048 2.52 0.096 4.728 0.184 6.344a6.248 6.248 0 0 1-2.008 4.952c-1.368 1.272-3.24 1.88-5.096 1.6-24.424-3.336-83.528-16.392-116.232-65.888-25.216 10.944-73.968 38.832-82.832 93.264a6.264 6.264 0 1 1-12.368-2.016c10.504-64.448 70.184-94.824 95.352-104.896a6.28 6.28 0 0 1 7.704 2.592c26.48 44.144 76.28 58.672 102.744 63.368-0.16-7.128-0.48-19.152-2.184-22.952a6.26 6.26 0 1 1 9.928-7.2c28.744 26.112 64.512 58.616 73.28 103.84 0.656 3.4-1.56 6.68-4.96 7.344-0.4 0.088-0.8 0.128-1.2 0.128"
                                fill="#474341" p-id="7104"></path>
                            <path
                                d="M366.744 424.568c-1.344-3.168-5.576-4.736-9.256-4.2-3.68 0.536-6.824 2.744-9.328 5.264-8.8 8.888-11.056 21.68-10.704 33.64 0.168 5.544 0.856 11.248 3.728 16.144 2.864 4.896 8.312 8.864 14.408 8.904 7.264 0.048 13.128-5.136 18.112-9.952"
                                fill="#F3D8C2" p-id="7105"></path>
                            <path
                                d="M372.152 421.4c-6.44-8.896-17.184-9.272-25.712-2.568-10.576 8.312-14.616 22.088-15.192 35.008-0.576 12.792 1.928 27.568 14.312 34.152 12.32 6.552 23.664-0.808 32.584-9.192 5.888-5.536-2.992-14.384-8.864-8.856-6.496 6.112-15.136 13.272-22.68 2.312-3.064-4.448-3.032-11.512-2.896-16.6 0.112-4.264 0.56-8.584 1.72-12.696 0.704-2.528 10.264-23.032 15.912-15.232 4.68 6.472 15.552 0.224 10.816-6.328"
                                fill="#474341" p-id="7106"></path>
                            <path
                                d="M648.2 432.304c0.344-11.968 13.488-12.48 17.696-11.944 4.216 0.544 7.816 2.744 10.672 5.272 10.08 8.88 12.664 21.672 12.256 33.64-0.184 5.552-0.984 11.248-4.264 16.152-3.28 4.896-9.52 8.864-16.504 8.904-8.32 0.048-15.032-5.136-20.744-9.952"
                                fill="#F3D8C2" p-id="7107"></path>
                            <path
                                d="M654.464 432.304c0.848-6.44 8.752-6.272 12.96-4.704 7.816 2.896 12.272 11.112 14.128 18.888 1.368 5.736 1.88 13.72 0.256 19.44-4.712 16.672-20.24 12.088-30.056 4.016-6.192-5.08-15.104 3.736-8.864 8.864 11.88 9.76 27.024 16.872 40.88 6.288 13.184-10.064 13.56-30.864 8.904-45.464-4.16-13.04-15.168-25.808-29.832-25.656-11.648 0.12-19.408 6.952-20.912 18.336-1.048 7.96 11.496 7.88 12.536-0.008M478.336 788.216a4.43 4.43 0 0 1-4.184-2.992c-2.2-6.408 0.952-12.344 3.488-17.112 0.592-1.12 1.184-2.232 1.696-3.336-1.04-0.536-1.936-0.912-2.824-1.304-3.88-1.68-8.28-3.592-10.768-8.104-1.776-3.224-2.152-7.272-1.096-11.696 1.52-6.336 5.496-12.376 11.816-17.944 3.152-2.776 6.544-5.176 9.824-7.496 1.864-1.32 3.72-2.632 5.536-4.024a4.42 4.42 0 0 1 6.712-4.88 5.856 5.856 0 0 1 2.632 4.72c0.088 2.976-1.984 5.656-3.784 7.04a186.93 186.93 0 0 1-5.984 4.352c-3.24 2.296-6.288 4.456-9.088 6.92-4.928 4.344-7.976 8.848-9.064 13.376-0.536 2.216-0.448 4.12 0.24 5.368 1.024 1.864 3.584 2.976 6.544 4.256 1.392 0.608 2.792 1.216 4.088 1.92 0.856 0.464 3.472 1.864 4.296 4.848 0.6 2.168-0.032 4.064-0.648 5.472-0.664 1.544-1.488 3.096-2.32 4.664-2.08 3.928-3.88 7.32-2.928 10.096a4.426 4.426 0 0 1-4.184 5.856m15.28-71.536h0.088-0.088zM551.576 787.288a4.408 4.408 0 0 1-3.224-1.392c-3.048-3.24-4.032-7.344-4.896-10.976-0.736-3.072-1.368-5.72-2.976-7.112-1.192-1.016-3.224-1.64-5.384-2.304-3.936-1.208-8.832-2.712-10.96-7.808-1-2.392-1.104-5.192-0.32-8.32 0.704-2.8 1.912-5.288 3.08-7.696 1.536-3.152 2.856-5.872 2.688-8.504-0.248-4-4.024-7.064-5.64-8.2-3.104-2.176-6.304-3.016-8.544-2.216-2.288 0.816-4.816-0.408-5.632-2.72a4.42 4.42 0 0 1 2.712-5.632c5.008-1.752 11.024-0.52 16.536 3.336 5.624 3.952 9.04 9.376 9.384 14.888 0.312 4.944-1.752 9.176-3.56 12.904-1.008 2.096-1.976 4.072-2.456 6-0.408 1.616-0.232 2.416-0.096 2.744 0.504 1.192 2.368 1.84 5.4 2.776 2.792 0.856 5.96 1.824 8.552 4.048 3.776 3.248 4.856 7.768 5.816 11.76 0.664 2.808 1.304 5.456 2.744 6.984a4.422 4.422 0 0 1-0.192 6.248 4.458 4.458 0 0 1-3.032 1.192"
                                fill="#474341" p-id="7108"></path>
                            <path
                                d="M400.528 263.808c-24.576 5.08-26.384 50.304-26.184 69.224 0.056 5.688 8.896 5.704 8.84 0-0.128-13.104 0.656-56.76 19.696-60.704 5.568-1.144 3.216-9.672-2.352-8.52M650.36 357.656c-0.096 7.552-0.712 15.136-1.224 22.672-0.376 5.68 8.464 5.656 8.848 0 0.504-7.536 1.128-15.112 1.224-22.672 0.072-5.696-8.776-5.696-8.848 0M544.792 328.176a114.38 114.38 0 0 0 11.736 3.976c5.488 1.528 7.832-7 2.352-8.528a114.334 114.334 0 0 1-11.736-3.968c-5.28-2.12-7.576 6.432-2.352 8.52M466.28 270.584c19.64 16.744 38.888 35.336 60.976 48.88 4.864 2.984 9.312-4.664 4.464-7.632-21.432-13.152-40.104-31.232-59.176-47.496-4.32-3.68-10.608 2.544-6.264 6.248"
                                fill="#925618" p-id="7109"></path>
                        </svg>
                    </div>
                    <div class="Customerinfo-name">
                        <p>邓波</p>
                        <p class="Customerinfo-name-img">
                            <svg t="1665060771036" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1069" width="15" height="15">
                                <path
                                    d="M949.333333 160v704h-874.666666v-704h874.666666z m-64 64h-746.666666v576h746.666666v-576z m-512.042666 142.229333a105.365333 105.365333 0 0 1 82.154666 171.328 149.162667 149.162667 0 0 1 67.136 119.616l0.085334 5.141334h-64a85.376 85.376 0 0 0-170.624-4.266667l-0.106667 4.266667h-64a149.226667 149.226667 0 0 1 67.221333-124.778667 105.365333 105.365333 0 0 1 82.133334-171.306667z m435.498666 197.717334v64h-202.133333v-64h202.133333z m-435.498666-133.717334a41.365333 41.365333 0 1 0 0 82.709334 41.365333 41.365333 0 0 0 0-82.709334z m360.32-34.176v64h-126.954667v-64h126.933333z"
                                    fill="#1677FF" p-id="1070"></path>
                            </svg>
                            <span>实名认证</span>
                        </p>
                    </div>
                    <div>
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>
            <!-- 相关推荐 -->
            <div class="detail-content-Secondarytitle">
                <div class="Secondarytitle">
                    <p>相关推荐</p>
                </div>
                <div class="SelectedTaskList">
                    <div class="TaskTitle">
                        <p>代取快递跑腿送到8栋阿姨</p>
                    </div>
                    <div class="price">
                        <p>
                            <span class="UnitPrice">5</span>
                            <span>￥</span>
                        </p>
                        <div class="TaskLabel">
                            <p>需电动车</p>
                            <p>免费培训</p>
                        </div>
                    </div>
                    <div class="icon_button">
                        <p>
                            <svg t="1665060771036" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1069" width="20" height="20">
                                <path
                                    d="M949.333333 160v704h-874.666666v-704h874.666666z m-64 64h-746.666666v576h746.666666v-576z m-512.042666 142.229333a105.365333 105.365333 0 0 1 82.154666 171.328 149.162667 149.162667 0 0 1 67.136 119.616l0.085334 5.141334h-64a85.376 85.376 0 0 0-170.624-4.266667l-0.106667 4.266667h-64a149.226667 149.226667 0 0 1 67.221333-124.778667 105.365333 105.365333 0 0 1 82.133334-171.306667z m435.498666 197.717334v64h-202.133333v-64h202.133333z m-435.498666-133.717334a41.365333 41.365333 0 1 0 0 82.709334 41.365333 41.365333 0 0 0 0-82.709334z m360.32-34.176v64h-126.954667v-64h126.933333z"
                                    fill="#1677FF" p-id="1070"></path>
                            </svg>
                            <span>实名认证</span>
                        </p>
                        <div class="orderBtn">立即抢单</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客户" />
                <van-goods-action-icon icon="star-o" text="收藏" />
                <van-goods-action-button :type="color" :text="Btntext" @click="onClickButton" />
            </van-goods-action>
        </div>
    </div>
</template>

<script>
import { applicants, } from '@/axios/index'
import { mapState } from 'vuex';
import { Notify } from 'vant';
export default {
    data() {
        return {
            color: 'danger',
            Btntext: '立即接单',
            toskdetail: {},
            content: '注意：请警惕非本平台提供的短信，QQ号，电话等兼职信息。报名后在线沟通，或获取雇主联系方式即可！若岗位涉及赌博、刷单、彩票等非法内容，请直接联系客服投诉，我们会严肃处理，感谢您的支持。注意：请警惕非本平台提供的短信，QQ号，电话等兼职信息。报名后在线沟通，或获取雇主联系方式即可！若岗位涉及赌博、刷单、彩票等非法内容，请直接联系客服投诉，我们会严肃处理，感谢您的支持。注意：请警惕非本平台提供的短信，QQ号，电话等兼职信息。报名后在线沟通，或获取雇主联系方式即可！若岗位涉及赌博、刷单、彩票等非法内容，请直接联系客服投诉，我们会严肃处理，感谢您的支持。'
        }
    },
    computed: {
        ...mapState(['user','socketCollections'])
    },
    methods: {
        onClickLeft() {
            this.$router.push('/')
        },
        updateData(e) {
            console.log(e);
            this.content = e
        },
        oncollection() {
            //收藏，在自己的用户表中添加collection字段，再吧ID传入该字段的数组中
        },
        onClickButton() {
            //立即接单按钮，在此活动信息中添加报名字段把用户ID放入，再放一个success字段。发布人宣布完结才可以进入完结。
            let _id = this.toskdetail._id
            if (this.Btntext === '立即沟通') {
                //在点击沟通按钮时在仓库创建一个连接对象，如果这个连接对象存在则直接跳转到该连接对象的聊天框
                
                // console.log(this.toskdetail.userinfo.account);//这个任务人的account
                console.log(this.toskdetail.userinfo.account);
                this.socketCollections.forEach((item,index,array) => {
                    console.log('进入数组循环');
                    if(item.fromws&&item.fromws.account === this.toskdetail.userinfo.account){
                        this.$router.push({ name: 'chartpage', query: item })
                        return
                    }
                    if(index+1===array.length){
                        console.log(1);
                        array.push({fromws:this.toskdetail.userinfo,content:[]})
                        this.$router.push({ name: 'chartpage', query: {fromws:this.toskdetail.userinfo,content:[]} })
                    }
                });
                if(this.socketCollections.length == 0){
                    this.socketCollections.push({fromws:this.toskdetail.userinfo,content:[]})
                    this.$router.push({ name: 'chartpage', query: {fromws:this.toskdetail.userinfo,content:[]} })
                }
                console.log(this.socketCollections);

                // let list = JSON.parse(window.localStorage.getItem('chatlist'))
                // if (list !== null) {
                //     for(let i = 0; i < list.length; i++) {
                //         if (list[i]._id === this.toskdetail.userinfo._id) {
                //             this.$router.push({ name: 'chartpage', query: this.toskdetail.userinfo })
                //             return
                //         }
                //     }
                //     list.push(this.toskdetail.userinfo)
                //     window.localStorage.setItem('chatlist', JSON.stringify(list))
                // } else {
                //     window.localStorage.setItem('chatlist', JSON.stringify([this.toskdetail.userinfo]))
                // }
                // this.$router.push({ name: 'chartpage', query: this.toskdetail.userinfo })

            } else {
                applicants({
                    userId: this.user.userId,
                    ToskID: _id
                }).then(res => {
                    console.log(res);
                    if (res.msg === '接单成功') {
                        Notify({ type: 'primary', message: res.msg })
                        this.color = 'warning'
                        this.Btntext = '立即沟通'
                    } else {
                        Notify({ type: 'warning', message: res.msg })
                    }
                })
                window.sessionStorage.clear()
            }




        }
    },
    mounted() {
        console.log(this.$route);
        this.toskdetail = this.$route.query
        if (this.toskdetail.status) {
            this.color = 'warning'
            this.Btntext = '立即沟通'
        }
    }
}
</script>

<style lang="less" scoped>
.detail-header {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.detail-content {
    padding: 10px;
    background: rgb(243, 241, 222);
    margin: 50px 0;

    .detail-content-title {
        background: rgb(255, 255, 255);
        border-radius: 5px;
        padding: 15px;
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;


        .content-label {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .TaskLabel {
                display: flex;

                p {
                    background: rgb(255, 235, 209);
                    color: rgb(255, 106, 0);
                    font-size: 10px;
                    padding: 3px;
                    border-radius: 5px;
                    margin: 2px;
                }
            }

            p {
                font-size: 12px;
                color: rgb(197, 196, 196);
            }
        }

        .content-price {
            display: flex;
            justify-content: space-between;

            p {
                color: rgb(255, 106, 0);
            }

            .UnitPrice {
                font-size: 20px;
            }
        }

        .content-time-place {
            font-size: 12px;

            p {
                padding: 3px 0;
            }
        }

    }

    .detali-content-notice {
        padding: 10px 15px;
        background: rgb(255, 234, 151);
        font-size: 14px;
        display: flex;
        justify-content: start;
        align-items: center;
        font-weight: 550;
        margin: 10px 0;

        .blod {
            color: #000;
            font-size: 15px;
            margin-right: 20px;
        }

        .blod2 {
            color: #b38f23;
            font-size: 14px;
        }
    }

    .detail-content-Secondarytitle {
        margin: 10px 0;

        .Secondarytitle {
            font-weight: 500;
            font-size: 20px;
            position: relative;
            margin-bottom: 10px;
            padding: 10px 15px;
            z-index: 0;
        }

        .Secondarytitle::before {
            content: '';
            position: absolute;
            height: 25px;
            width: 5px;
            background: rgb(255, 221, 30);
            z-index: 99;
            left: 4px;
            top: 9px;
        }

        .detail-richText,
        .Riskstatement {
            background: rgb(255, 255, 255);
            padding: 20px 15px;
            border-radius: 5px;
            line-height: 30px;
        }

        .Riskstatement {
            font-size: 5px;
            padding: 10px 15px;
            line-height: 15px;
        }

        // 客户信息
        .Customerinfo {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            background: #fff;
            border-radius: 5px;

            .Customerinfo-name {
                flex: 1;

                .Customerinfo-name-img {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    font-size: 13px;
                    color: rgb(118, 118, 118);
                }
            }
        }

        .SelectedTaskList {
            background: rgb(255, 255, 255);
            padding: 10px;
            height: 90px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            border-radius: 5px;
            margin-bottom: 10px;

            .price {
                display: flex;
                justify-content: space-between;

                p {
                    color: rgb(255, 106, 0);
                }

                .UnitPrice {
                    font-size: 20px;
                }

                .TaskLabel {
                    display: flex;

                    p {
                        background: rgb(255, 235, 209);
                        color: rgb(255, 106, 0);
                        font-size: 10px;
                        padding: 3px;
                        border-radius: 5px;
                        margin: 2px;
                    }
                }
            }

            .icon_button {
                display: flex;
                align-items: center;
                justify-content: space-between;

                p {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                }

                .orderBtn {
                    background: rgb(255, 106, 0);
                    padding: 7px 12px;
                    border-top-right-radius: 5px;
                    border-bottom-left-radius: 5px;
                    font-size: 13px;
                    color: #fff;
                }
            }
        }
    }

}
</style>